<template>
  <view>
    <view>
      <view class="mastermap">
        <image :src="list.product.mainImg" alt="">
      </view>
      <view class="mastermap_title">{{ list.product.name }}</view>
      <view class="mastermap_price">
        <view class="mastermap_price_pay">支付</view>
        <view class="mastermap_price_count">{{ list.payPrice }}</view>
        <view class="venosus">金豆</view>
        <view class="mastermap_price_right">
          +
          <view class="mastermap_price_count">{{ list.usePoint }}</view>
          元
        </view>
      </view>
    </view>

    <view class="content">
      <view class="contentbox">
        <view class="content_show">
          <view class="mastermap_price_pay margin">支付 :</view>
          <view class="mastermap_price_count payment">{{ list.payPrice }}</view>
          <view class="venosus">金豆</view>
          <view class="mastermap_price_right">
            +
            <view class="mastermap_price_count payment">{{
              list.usePoint
            }}</view>
            元
          </view>
        </view>
        <view class="discounts">
          <view class="discounts_left margin">优惠 :</view>
          <view>0</view>
        </view>
        <view class="discounts">
          <view class="discounts_left margin">运费:</view>
          <view>免邮</view>
        </view>
      </view>
      <view class="content_button">
        <view class="content_button_logistics">
          <view class="receiving margin">收货信息 :</view>
          <view class="information">
            <view class="goodsname">{{value.receiverName}}</view>
            <view class="information_content">{{value.receiverMobile}}</view>
            <view class="goodssite">{{value.receiverAddress}}</view>
          </view>
        </view>
        <view class="content_button_logistics">
          <view class="receiving margin">订单编号 :</view>
          <view>{{list.num}}</view>
        </view>
        <view class="content_button_logistics">
          <view class="receiving margin">订单时间 :</view>
          <view>{{ list.product.createAt }}</view>
        </view>
        <view class="content_button_logistics">
          <view class="receiving margin">订单状态 :</view>
          <view>{{ list.state }}</view>
        </view>
      </view>
    </view>

    <view class="affirm">
      <view class="filleted" v-if="false">确认收货</view>
      <view class="filleted affirm_left" v-if="false">查看物流</view>
    </view>
  </view>
</template>

<script>
import { getOrderInfo } from "@/config/api"
export default {
  data() {
    return {
      list: {},
      value:{}
    };
  },
 async onLoad({ value }) {
    this.list = JSON.parse(value);

    let item = JSON.parse(value)
    console.log(item);

    let res = await getOrderInfo({id:item.id,type:'order'})
    console.log(86,res);
    this.value = res
  },
};
</script>

<style lang="scss" scoped>
.mastermap {
  width: 250rpx;
  height: 250rpx;
  margin: 80rpx auto 0 auto;
  // border: 1rpx solid red;
  // background-color: #d6d6d6;
  image {
    width: 100%;
    height: 100%;
  }
}
.mastermap_title {
  font-size: 28rpx;
  text-align: center;
  margin: 30rpx 0 25rpx 0;
  //   background-color: skyblue;
}
.mastermap_price {
  display: flex;
  font-size: 22rpx;
  justify-content: center;
  align-items: center;
}
.venosus {
  font-size: 16rpx;
  font-weight: 700;
  color: #000;
}
.mastermap_price_right {
  display: flex;
  align-items: center;
}
.mastermap_price_pay {
  color: #000;
  font-size: 24rpx;
}
.mastermap_price_count {
  font-size: 32rpx;
  color: #000;
  font-weight: 700;
  margin: 0 6rpx 0 8rpx;
}
.content {
  background-color: #eeeeee;
  padding: 30rpx 28rpx 70rpx 24rpx;
  margin-top: 64rpx;
  font-size: 24rpx;
  color: #4a4a4a;
  .contentbox {
    width: 698rpx;
    height: 180rpx;
    display: flex;
    flex-direction: column;
    border-radius: 10rpx;
    justify-content: space-evenly;
    background-color: #fff;
    .discounts {
      display: flex;
      .discounts_left {
        width: 72rpx;
        height: 33rpx;
      }
    }
  }
  .content_show {
    display: flex;
    align-items: center;
    font-size: 22rpx;
    .mastermap_price_pay {
      width: 72rpx;
      height: 33rpx;
      color: #4a4a4a;
      font-size: 24rpx;
    }
    .payment {
      font-size: 28rpx;
    }
  }
}
.content_button {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 698rpx;
  height: 260rpx;
  background-color: #fff;
  border-radius: 10rpx;
  margin-top: 33rpx;
  font-size: 24rpx;
  color: #616161;
  .content_button_logistics {
    display: flex;
    .information {
      display: flex;
      overflow: hidden;
      height: 33rpx;
      font-size: 24rpx;
      .information_content {
        margin: 0 7rpx;
      }

    }
    .receiving {
      width: 120rpx;
      height: 33rpx;
    }
  }
}
.margin {
  margin-left: 22rpx;
}
.affirm {
  width: 750rpx;
  height: 100rpx;

  .filleted {
    float: right;
    width: 146rpx;
    height: 50rpx;
    border: 1rpx solid #618cec;
    border-radius: 25rpx;
    font-size: 24rpx;
    text-align: center;
    line-height: 50rpx;
    color: #618cec;
    margin: 25rpx 28rpx 0 0;
  }
  .affirm_left {
    color: #686868;
    border: 1rpx solid #686868;
    margin-right: 20rpx;
  }
}
</style>